<template>
  <div ref="contentRef" :class="['wrap', hasScroll ? 'limit' : '']">
    <div v-if="hasScroll" class="load-more">
        <div class="arrow-content" @click="showMore">
          <span>继续阅读全文</span>
          <i class="fa fa-dropdown"></i>
        </div>
    </div>
    <div v-if="content"
      class="article-content"
      v-html="content"
      @click="handleContent"  
    ></div>

    <ul v-if="tags.length > 0" class="tags-wrap">
      <li v-for="item in tags" :key="item.id" class="tag-item">
        <van-tag
          class="vtag"
          round
          @click="handleTag(item)"
        >
            {{ item.name }}
        </van-tag>
      </li>
    </ul>            
    <div class="toolbar">
        <div class="toolbar-item" @click="showToast">
            <i class="fa fa-heart"></i>
            <span>{{info.stats.favorite}}</span>
        </div>
        <div class="toolbar-item" @click="showToast">
            <i class="fa fa-nice"></i>
            <span>{{info.stats.like}}</span>
        </div>
        <div class="toolbar-item" @click="handleShare">
            <i class="fa fa-share"></i>
            <span>{{info.stats.share}}</span>
        </div>
    </div>
  <share-sheet ref="shareRef" :url="shareUrl" :title="info.title" :pic="info.banner_url"></share-sheet>                
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Tag as VanTag, Toast } from 'vant'
import ShareSheet from '@/components/ShareSheet'
export default {
  name: 'ArticleContent',
  components: {
    VanTag,
    ShareSheet
  },
  props: {
    info: {
      type: Object
    },
    content: {
      type: String
    },
    tags: {
      type: Array
    }
  },
  setup(props) {
    const router = useRouter()
    const params = reactive({
      contentRef: null,
      shareRef: null,
      hasScroll: true,
      shareUrl: window.location.href
    })

    const countHeight = () => {
      params.hasScroll = params.contentRef.scrollHeight > params.contentRef.clientHeight
    }

    const showMore = () => {
      params.hasScroll = false      
    }

    const handleContent = (e) => {
        const { target: { dataset } } = e
        if (dataset.bvid) {
          router.push({
            name: 'video',
            params: {
              bvid: dataset.bvid
            }
          })          
        }
    }

    const handleTag = tag => {
      router.push({
        name: 'tag',
        params: {
          id: tag.id
        }
      })      
    }

    const showToast = () => {
      Toast('功能待开发')
    }

    const handleShare = () => {
      params.shareRef.show()
    }

    onMounted(() => {
      countHeight()
    })

    watch(() => props.content, () => {
      countHeight()
    })

    return {
      ...toRefs(params),
      showMore,
      handleTag,
      handleContent,
      showToast,
      handleShare
    }
  }
}
</script>
<style lang="scss">
  .article-content {
    p, .img-box {
        margin: 0;
    }
    .img-box {
        margin-bottom: 25px;
    }
    .color-default{
        color: #222;
    }
    .font-size-20 {
        font-size: 20px;
    }
    a{
        color: $theme-color;
    }
    img{
        display: block;
        max-width: 100%;
        height: auto;
        border: none;
        margin: 0 auto;
    }
    figure{
        margin: 0;
        padding: 0;
    }
    figcaption{
        color: $color-text-secondary;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
        margin-top: 10px;
        display: inline-block;
        width: 90%;
    }
  }
</style>
<style lang="scss" scoped>
.wrap{
    position: relative;
    &.limit{
      overflow: hidden;
      max-height: 1500px;
    }
}
.article-content{
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
    text-align: left;
    letter-spacing: 0;
    padding: 0 16px;
    color: $color-text-regular;

    

    .video-wrap{
        display: flex;
        justify-content: space-between;
    }
    .video-item{
        color: $color-text-secondary;
        width: 48%;
        box-sizing: border-box;
        border-radius: 6px;
        position: relative;
    }
    .video-link{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
    }
    .video-cover{        
        @include cover(300, 188);
        @include border1px(#e7e7e7, 1px 1px 0);
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        box-sizing: border-box;
        background: {
          color: $color-grey;
          size: 36%;
          image: url('~@/assets/images/placeholder.png');
          repeat: no-repeat;
          position: 50%;
        }
    }

    .video-info{
        height: 77px;
        vertical-align: top;
        @include border1px(#e7e7e7, 0 1px 1px);
        padding: 8px 10px 0;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: rgba(244, 244, 245, .3);
        box-sizing: border-box;
    }
    .video-title{
        height: 38px;
        line-height: 19px;
        font-size: 12px;
        overflow: hidden;
        margin-bottom: 6px;
        color: $color-text-regular;
    }
    .video-author{
        display: flex;
        height: 17px;
        line-height: 17px;
        .fa{
            font-size: 16px;
            vertical-align: middle;
            margin-right: 5px;
        }
        .name{
            height: 17px;
            max-width: 80px;
            vertical-align: middle;
            font-size: 12px;
            @include max-lines(1);
        }
    }
    .copyright{
        margin: 0;
        font-size: 12px;
        color: $color-text-secondary;
    }
}
.tags-wrap{
    margin-top: 12px;
    padding: 0 16px;
    .tag-item{
      display: inline-block;
      padding-right: 12px;
      margin-bottom: 10px;
    }
    .vtag{
      padding: 8px 18px;
      color: $color-text-regular;
      background-color: $color-grey;
      font-size: 12px;
    }
}
.toolbar{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: {
      top: 20px;
      bottom: 20px;
    };
    &-item{
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 12px;
      color: $color-text-secondary;
    }
    .fa{
      margin-bottom: 4px;
      color: $color-text-primary;
      font-size: 22px;
    }
}
.load-more{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    &:before{
      content: '';
      display: block;
      width: 100%;
      height: 120px;
      background-image: linear-gradient(0deg,#fff,rgba(255,255,255, 0));
    }
    .arrow-content{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: {
        top: 10px;
        bottom: 10px;
      }
      color: $theme-color;
      background-color: #fff;
    }
}
</style>